<template>
  <div class="guihua">
    <div class="nav">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>项目申报</el-breadcrumb-item>
        <el-breadcrumb-item>年度计划申报</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="title">
      <h2>当前规划</h2>
    </div>
    <div class="content">
      <div class="flex-wrap">
        <div
          class="card"
          v-for="(item, index) in currentList"
          :key="index"
          @click="detail(item.planId)"
        >
          <div class="row1 space-between">
            <div>
              <i class="el-icon-document" style="color: #4967CF;" />
              {{item.planNo}}
            </div>
            <div>
              <span class="right-tag">{{item.planBeginTime | year}}-{{item.planEndTime | year}}年</span>
            </div>
          </div>
          <div class="sub-title">
            <h2>{{item.planName}}</h2>
          </div>
          <el-row :gutter="20" class="row">
            <el-col class="col-left" :span="5">编制单位：</el-col>
            <el-col class="col-right" :span="5">{{item.compileUnit}}</el-col>
            <el-col class="col-left" :span="5">编制人：</el-col>
            <el-col class="col-right" :span="5">{{item.compilePerson}}</el-col>
          </el-row>
          <el-row :gutter="20" class="row">
            <el-col class="col-left" :span="5">编制时间：</el-col>
            <el-col class="col-right" :span="5">{{item.compileTime | beginAndEndTime}}</el-col>
            <el-col class="col-left" :span="5">提交时间：</el-col>
            <el-col class="col-right" :span="5">{{item.createTime | beginAndEndTime}}</el-col>
          </el-row>
          <div class="row2" :class="item.auditResult==1?'success-bg':'danger-bg'">
            <div>
              状态：
              <span
                :class="item.auditResult==1?'success':'danger'"
              >{{item.auditResult==1?'审定通过':item.auditResult==2?'审定不通过':''}}</span>
            </div>
            <span style="margin-left:250px">申报入口开启:</span>
            <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </div>
        </div>
        <div class="emty-card" @click="add()">
          <i class="el-icon-circle-plus-outline" style="color: #4967CF;" />新增规划
        </div>
      </div>
    </div>
    <div class="title">
      <h2>往年规划</h2>
    </div>
    <div class="search space-between">
      <div class="year-param-card">
        <span class="all">全部</span>
        <span class="year-list">
          <i class="el-icon-arrow-left" />
          <span v-for="(item, index) in yearList" :key="index" class="year-tag">
            <span @click="selectYear(item)" :class="item == currentYear?'info':''">{{item}}年</span>
          </span>
          <i class="el-icon-arrow-right" />
        </span>
      </div>
      <div class="year-search">
        <el-input placeholder="请输入你要选择的年份" v-model="year" style="width: 240px;">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>
    <div class="content">
      <div class="flex-wrap">
        <div class="card" v-for="(item, index) in pastList" :key="index">
          <div class="row1 space-between">
            <div>
              <i class="el-icon-document" style="color: #4967CF;" />
              {{item.planNo}}
            </div>
            <div>
              <span class="right-tag">{{item.planBeginTime | year}}-{{item.planEndTime | year}}年</span>
            </div>
          </div>
          <div class="sub-title">
            <h2>{{item.planName}}</h2>
          </div>
          <el-row :gutter="20" class="row">
            <el-col class="col-left" :span="5">编制单位：</el-col>
            <el-col class="col-right" :span="5">{{item.compileUnit}}</el-col>
            <el-col class="col-left" :span="5">编制人：</el-col>
            <el-col class="col-right" :span="5">{{item.compilePerson}}</el-col>
          </el-row>
          <el-row :gutter="20" class="row">
            <el-col class="col-left" :span="5">编制时间：</el-col>
            <el-col class="col-right" :span="5">{{item.compileTime | beginAndEndTime}}</el-col>
            <el-col class="col-left" :span="5">提交时间：</el-col>
            <el-col class="col-right" :span="5">{{item.createTime | beginAndEndTime}}</el-col>
          </el-row>
          <div class="row2" :class="item.auditResult==1?'success-bg':'danger-bg'">
            <div>
              状态：
              <span
                :class="item.auditResult==1?'success':'danger'"
              >{{item.auditResult==1?'审定通过':item.auditResult==2?'审定不通过':''}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      value: true,
      currentList: [],
      pastList: [],
      pageNumber: 1,
      pageSize: 6,
      year: null,
      currentYear: "",
      yearList: [2020, 2019, 2018, 2017, 2016, 2015],
      previousYear: 1
    };
  },
  mounted() {
    let date = new Date();
    this.currentYear = date.getFullYear();
    this.queryCurrentList();
    this.queryPastYears("");
  },
  filters: {
    year(time) {
      return time ? time.substring(0, 4) : "暂无";
    },
    beginAndEndTime(time) {
      return time ? time.substring(0, 10) : "暂无";
    }
  },
  methods: {
    /** 查询当前 */
    queryCurrentList() {
      let that = this;
      let day1 = new Date();
      that.axios
        .get("/cityPlan/getList", {
          params: {
            pageNumber: 1,
            pageSize: 10,
            compileTime: day1.getFullYear()
          }
        })
        .then(function(res) {
          if (res.code == 1000) {
            that.currentList = res.data.records;
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    // 选择年份
    selectYear(val) {
      this.previousYear = null;
      this.year = val;
      this.queryPastYears(val);
    },
    /** 查询往年 */
    queryPastYears(year) {
      let that = this;
      that.axios
        .get("/cityPlan/getList", {
          params: {
            pageNumber: this.pageNumber,
            pageSize: 6,
            compileTime: year,
            previousYear: that.previousYear
          }
        })
        .then(function(res) {
          if (res.code == 1000) {
            that.pastList = res.data.records;
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    add() {
          this.$router.push('/home/shenbao/jihuaAdd');
    //   this.$router.push({
    //     name: "jihuaAdd"
    //   });
    },
    detail(planId) {
      this.$router.push({
        path: "/home/shenbao/jihuaDetail",
        query: { id: planId }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.guihua {
  .flex {
    display: flex;
  }
  .nav {
    line-height: 80px;
  }
  .title {
    margin: 30px 0 20px;
  }
  .content {
    width: 1205px;
    background-color: #ffffff;
    padding: 10px 0;
    .emty-card {
      width: 580px;
      border: 1px solid #e6e6e6;
      margin-left: 15px;
      margin-bottom: 10px;
      font-size: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 196px;
    }
    .card {
      width: 580px;
      border: 1px solid #e6e6e6;
      margin-left: 15px;
      margin-bottom: 10px;
      .col-left {
        text-align: right;
      }
      .col-right {
        padding-left: 10px;
      }
      .sub-title {
        padding-left: 10px;
        margin: 20px 0;
      }
      .row {
        margin: 20px 0 10px;
      }
    }
    .flex-wrap {
      display: flex;
      flex-wrap: wrap;
    }
    .line-height {
      line-height: 40px;
    }
    .row1 {
      display: flex;
      width: 100%;
      align-items: center;
      padding: 20px 0 10px 10px;
    }
    .row2 {
      display: flex;
      width: 100%;
      padding: 20px 0 20px 35px;
    }
    .right-tag {
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      background-color: #4967cf;
      color: #ffffff;
      display: flex;
      padding: 5px 20px;
    }
    .success-bg {
      background: rgba(57, 173, 60, 0.04);
    }
    .danger-bg {
      background: rgba(252, 29, 30, 0.04);
    }
    .warning-bg {
      background: rgba(255, 102, 0, 0.06);
    }
    .success {
      color: #39ad3c;
    }
    .danger {
      color: #fc1d1e;
    }
    .warning {
      color: #ff6600;
    }
  }
  .space-between {
    justify-content: space-between;
  }
  .search {
    width: 1205px;
    display: flex;
    padding: 20px 0;
    align-items: center;
    .all {
      display: inline-block;
      width: 50px;
      text-align: center;
    }
    .year-param-card {
      line-height: 50px;
      display: inline;
      background-color: #ffffff;
    }
    .year-search {
      display: inline;
    }
    .year-tag {
      padding: 10px;
      cursor: pointer;
    }
    .info {
      color: #c0c4cc !important;
    }
    .year-list {
      margin: 0 10px;
    }
  }
}
</style>